<template>
  <div>
    <div class="wrapper">
      <Anchor ref="anchor" :labelList="labels">
        <div id="row-01">
          <TopFilter :list="topFilterList" :labelWidth="90" :cols="3" @filterChange="changeHandle"></TopFilter>
          <FilterTable
            ref="table"
            columnsRef="jzyAddRecordPanel"
            :height="300"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            selectionType="single"
            :datakey="'rows'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="columns => (this.columns = columns)"
          ></FilterTable>
        </div>
        <div id="row-02">
          <FilterTable ref="table2" columnsRef="jzyAddRecordPanel2" :height="200" :columns="columns2" :dataSource="list" :onColumnsChange="columns => (this.columns2 = columns)"></FilterTable>
        </div>
      </Anchor>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDrawer">取 消</el-button>
      <el-button type="primary" @click="addProdHandle">新 增</el-button>
      <el-button type="primary" @click="confirmDrawer">确 定</el-button>
    </div>
    <BaseDialog :visible.sync="visible" title="新增维修项目" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <AddRecordModal @close="closeDialog" />
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import AddRecordModal from './addRecordModal';
import { getXmcxzSelect, getGongzSelect, getWxproductList, getWxtypeSelect, getWxpjList } from '@/api/repair/repairReception/customer';

export default {
  name: 'AddRecordPanel',
  components: {
    AddRecordModal
  },
  mixins: [dictionary],
  data() {
    this.selectedRows = [];
    return {
      labels: [
        { title: '维修项目', id: 'row-01' },
        { title: '维修备件', id: 'row-02' }
      ],
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchApi: getWxproductList,
      fetchParams: { xhrAbort: true },
      list: [],
      columns2: this.createTableColumns2(),
      visible: false
    };
  },
  mounted() {
    this.getXmcxzSelect();
    this.getGongzSelect();
    this.getWxtypeSelect();
    setTimeout(() => {
      this.$refs.anchor.REFRESH();
    }, 100);
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'MULTIPLE_SELECT',
          label: '项目车型组',
          fieldName: 'modelLabourCode',
          placeholder: '请选择...',
          itemList: [
            { value: 10451001, text: '店面' },
            { value: 10451003, text: '厂家' }
          ]
        },
        {
          type: 'INPUT',
          label: '年款',
          fieldName: 'modelYear',
          placeholder: '例：2019'
        },
        {
          type: 'INPUT',
          label: '维修项目名称',
          fieldName: 'labourName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '维修项目代码',
          fieldName: 'labourCode',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '维修项目拼音',
          fieldName: 'spellCode',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '是否下发',
          fieldName: 'downTag',
          placeholder: '请选择...',
          itemList: this.createDictList('1278')
        },
        {
          type: 'INPUT_TREE',
          label: '维修项目选择',
          fieldName: 'LABOUR_CODE',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '更新日期',
          style: { minWidth: '200px' },
          fieldName: 'beginDate|endDate',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'INPUT',
          label: '零件代码',
          fieldName: 'partNo',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '零件名称',
          fieldName: 'partName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '故障部位',
          fieldName: 'posName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '故障名称',
          fieldName: 'appName',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '工种',
          fieldName: 'workerTypeCode',
          placeholder: '请选择...',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '标准工时为空',
          fieldName: 'nullLabour',
          placeholder: '请选择...',
          itemList: this.createDictList('1278')
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '维修项目车型分组代码',
          dataIndex: 'MODEL_LABOUR_CODE',
          minWidth: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '维修项目代码',
          dataIndex: 'LABOUR_CODEF',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目维修类型',
          dataIndex: 'REPAIR_TYPE_CODE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editable: true,
          editType: 'select',
          editItems: []
        },
        {
          title: '标准工时',
          dataIndex: 'STD_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工工时',
          dataIndex: 'ASSIGN_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工种',
          dataIndex: 'WORKER_TYPE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔项目代码',
          dataIndex: 'OPERATION_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔工时',
          dataIndex: 'CLAIM_LABOUR',
          sorter: true,
          editable: true,
          defaultEditable: true,
          editType: 'number',
          precision: 0,
          max: 1000,
          min: 0
        },
        {
          title: '拼音代码',
          dataIndex: 'SPELL_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目分组代码',
          dataIndex: 'REPAIR_GROUP_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '总部标准工时',
          dataIndex: 'OEM_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否下发',
          dataIndex: 'DOWN_TAG',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1278'),
          render: props => {
            return <span>{this.createDictText(props.row.DOWN_TAG, '1278')}</span>;
          }
        },
        {
          title: '创建日期',
          dataIndex: 'CREATED_AT',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新日期',
          dataIndex: 'UPDATED_AT',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否会员专用',
          dataIndex: 'IS_MEMBER',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1278'),
          render: props => {
            return <span>{this.createDictText(props.row.IS_MEMBER, '1278')}</span>;
          }
        },
        {
          title: '更新状态',
          dataIndex: 'REPLACE_STATUS',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1278'),
          render: props => {
            return <span>{this.createDictText(props.row.REPLACE_STATUS, '1278')}</span>;
          }
        }
      ];
    },
    createTableColumns2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '备件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '仓库代码',
          dataIndex: 'STORAGE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型组',
          dataIndex: 'PART_MODEL_GROUP_CODE_SET',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'PART_QUANTITY',
          sorter: true,
          editable: true,
          defaultEditable: true,
          editType: 'number',
          precision: 0,
          max: 1000,
          min: 0
        },
        {
          title: '库存数量',
          dataIndex: 'STOCK_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售价',
          dataIndex: 'SALES_PRICE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修车型分组代码',
          dataIndex: 'MODEL_LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件中缀',
          dataIndex: 'PART_INFIX',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '故障部位',
          dataIndex: 'POS_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    },
    selectChangeHandle(rows) {
      this.selectedRows = rows;
      if (!rows.length) {
        this.list = [];
        return;
      }
      this.getWxpjList(rows[0]);
    },
    async getXmcxzSelect() {
      const res = await getXmcxzSelect();
      this.topFilterList[0].itemList = res.map(x => ({ value: x.MODEL_LABOUR_CODE, text: x.MODEL_LABOUR_NAME }));
    },
    async getGongzSelect() {
      const res = await getGongzSelect();
      this.topFilterList[12].itemList = res.map(x => ({ value: x.WORKER_TYPE_CODE, text: x.WORKER_TYPE_NAME }));
    },
    async getWxtypeSelect() {
      const res = await getWxtypeSelect();
      this.columns[4].filterItems = this.columns[4].editItems = res.map(x => ({ value: x.REPAIR_TYPE_CODE, text: x.REPAIR_TYPE_NAME }));
    },
    async getWxpjList(row) {
      const res = await getWxpjList(row, { offset: 0, limit: 100 });
      this.list = res.rows;
    },
    addProdHandle() {
      this.visible = true;
    },
    confirmDrawer() {
      this.closeDrawer(this.selectedRows);
    },
    closeDrawer(list) {
      this.$emit('close', false, list);
    },
    closeDialog(val, type) {
      if (type === 'reload') {
        this.fetchParams = { ...this.fetchParams, offset: 0, xhrAbort: false };
      }
      this.visible = val;
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 135px);
}
</style>
